﻿@model JewererBasic.COMPONENT

<h2>Create Component</h2>
@using (Html.BeginForm())
{
    <fieldset>

        <a href="/Component/Index">
            <input type="button" value="BACK" />
        </a>

        <fieldset>
            <legend>Component Information</legend>
            <table>
                <tr>
                    <td>
                        <table class="table head">
                            <tr>
                                <th>ComponentId</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Type</th>
                                <th>Unit</th>
                                <th>Weight</th>
                            </tr>
                            <tr>
                                <td>
                                    @Html.TextBoxFor(m => m.Id, new { @required = "required", @style = "width: 200px" })
                                    @Html.ValidationMessageFor(m => m.Id)
                                </td>
                                <td>
                                    @Html.TextBoxFor(m => m.Name, new { @required = "required", @style = "width: 200px" })
                                    @Html.ValidationMessageFor(m => m.Name)
                                </td>
                                <td>
                                    @Html.TextBoxFor(m => m.Decription, new { @required = "required", @style = "width: 200px" })
                                    @Html.ValidationMessageFor(m => m.Decription)
                                </td>
                                <td>
                                    @Html.DropDownListFor(m => m.IdType, ViewBag.IdType as SelectList, new { @style = "width: 100px" })
                                </td>
                                <td>
                                    @Html.DropDownListFor(m => m.IdUnit, ViewBag.IdUnit as SelectList, new { @style = "width: 100px" })
                                </td>
                                <td>
                                    @Html.TextBoxFor(m => m.Weight, new { @style = "width: 100px" })
                                    @Html.ValidationMessageFor(m => m.Weight)
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </fieldset>

        <fieldset>
            <legend>Child Information</legend>
            <p class="myStrongAnnounce">@ViewBag.Error</p>
            <table>
                <tr class="head">
                    <th>Component Id</th>
                    <th>Percentage</th>
                </tr>
                @Html.EditorFor(m => m.COMPONENT_MOLECULE)
            </table>
        </fieldset>
        <input type="submit" value="Save" />
    </fieldset>
}
@section Scripts{
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="@Url.Content("~/Scripts/json2.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).on("click", "#remove ", function () {
            $(this).parents('.myTr').remove();
            return false;
        });

        $(document).ready(function () {
            $("form").submit(function (evt) {
                var sum = 0;
                $('.tdPercentage').each(function () {
                    var percentage = $(this).children('.txtPercentage').val();
                    sum = sum + percentage * 10;
                });
                if (sum != 1000) {
                    alert("Not 100% total");
                    evt.preventDefault();
                    return false;
                }
            });

            $('.txtComponentId').each(function () {
                var myElement = $(this);
                $(myElement).autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '/Component/ComponentAutoComplete',
                            data: { query: $(myElement).val() },
                            dataType: 'json',
                            type: 'GET',
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item,
                                        value: item
                                    }
                                }));
                            },
                        })
                    },
                    select: function (event, ui) {
                        $(myElement).val(ui.item.label);
                        return false;
                    },
                    minLength: 1
                });
            });
        });
    </script>
}